<!--
 * @Author: 甘国炎 gangy@yusys.com.cn
 * @Date: 2023-04-13 10:00:51
 * @LastEditors: 甘国炎 gangy@yusys.com.cn
 * @LastEditTime: 2023-04-19 16:54:37
 * @FilePath: \canadia-tmf-mbankd:\code\js\demo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
      <h2>num1是data中的变量,其初始值为:{{num1}}</h2>
      <h2>点击按钮后,data中的num1变化为:{{num1}}</h2>
      <h2>点击按钮后,computed中的c_num1变化为:{{c_num1}}</h2>
      <button @click="outerNumChange">给num1+10</button>
        <hr>
      <h1>1.data定义的属性不会因为它的赋值变量的变化而变化</h1>
      <h1>2.computed定义的属性会随它的赋值变量的变化而变化</h1>
    </div>
  </template>
  
  <script>
  let outer_obj1 = { no: 30 };
  export default {
    data() {
      return {
        t: outer_obj1, //这样,这个组件被多次使用时，c_num1共享状态。没有这句，computed中的c_num1也不跟踪状态。
        num1: outer_obj1.no
      };
    },
    computed: {
      c_num1() {
        return outer_obj1.no;
      }
    },
    methods: {
      outerNumChange() {
        outer_obj1.no += 10;
        console.log(this.c_num1);
      }
    }
  };
  </script>
  
  <style>
  </style>
  
  